<template>
    <!-- main S -->
    <view class="main">
        <!-- imageList S -->
        <view class="imageList">
            <swiper :indicator-dots="true">
                <swiper-item v-for="(image,index) in goodsInfo.images" :key="index">
                    <view class="swiper-item">
                        <image :src="image" mode=""></image>
                    </view>
                </swiper-item>
            </swiper>
        </view>
        <!-- imageList E -->
        <view class="redPackBox">
            <view class="redPack">
                <image src="../../static/redpack.png" mode=""></image>
                <text>72.00</text>
            </view>
            <view class="buyNum">
                已售 4510
            </view>
            <view class="clear_both"></view>
        </view>
        <view class="titleBox">
            <text>心相印柔影卫生纸卷纸1700克提装家用卷纸厕纸四层加厚实芯卷批发</text>
        </view>
        <view class="contentBox">
            <image src="http://dev-platform.zhiwangyunchuang.com:800/1.jpg" mode=""></image>
            <image src="http://dev-platform.zhiwangyunchuang.com:800/2.jpg" mode=""></image>
            <image src="http://dev-platform.zhiwangyunchuang.com:800/1.jpg" mode=""></image>
        </view>
    </view>
    <!-- main E -->
</template>

<script>
    export default {
        data() {
            return {
                title: 'goodsDetail',
                goodsInfo: {
                    'title': '商品1',
                    'redpack': 110,
                    'images': [
                        'http://dev-platform.zhiwangyunchuang.com:800/1.jpg',
                        'http://dev-platform.zhiwangyunchuang.com:800/1.jpg',
                        'http://dev-platform.zhiwangyunchuang.com:800/1.jpg'
                    ]
                }
            }
        },
        onLoad() {},
        methods: {

        }
    }
</script>

<style scoped>
    .main {
        padding-top: 0;
        padding-bottom: 0;
        background-color: #F3F4F5;
    }

    .main>.imageList {
        background-color: #FFFFFF;
        height: 700rpx;
        width: 100%;
        margin: 0 auto;
    }

    swiper {
        position: relative;
        height: 700rpx !important;
        width: 100%;
    }

    .imageList .swiper-item>image {
        height: 700rpx !important;
        width: 100%;
    }
    
    .main>.redPackBox{
        height: 100rpx;
        width: 100%;
        border: 0rpx solid red;
        background-color: #EE5B40;
        padding-top: 10rpx;
    }
    .redPackBox>.redPack{
        margin-top: 20rpx;
        margin-left: 30rpx;
    }
    .redPackBox>.redPack>image{
        height: 46rpx;
        width: 46rpx;
        float: left;
    }
    .redPackBox>.redPack>text{
        display: inline-block;
        font-size: 60rpx;
        color: #FFFFFF;
        font-weight: bold;
        float: left;
        margin-top: -20rpx;
        overflow: hidden;
        width: 400rpx;
        border: 0rpx solid blue;
        margin-left: 10rpx;
    }
    .redPackBox>.buyNum{
        display: inline-block;
        color: #FFFFFF;
        margin-left: 100rpx;
        margin-top: 10rpx;
    }
    
    .main>.titleBox{
        padding: 10rpx;
        height: 100rpx;
        background-color: #FFFFFF;
        border: 0rpx solid red;
        font-size: 32rpx;
        color: #000;
        letter-spacing: 4rpx;
        margin-bottom: 20rpx;
        font-weight: bold;
    }
    
    .main>.contentBox{
        width: 100%;
    }
    .contentBox>image{
        height: 700rpx;
        width: 100% !important;
    }
</style>
